<template>
	<view class="container">
		<view class="page-box">
			<index v-if="barCurrent == 0"></index>
			<square v-if="barCurrent == 1"></square>
			<user v-if="barCurrent == 2"></user>
		</view>
		<view class="tabbar">
			<view class="bar" :class="barCurrent == 0?'activeBar':''" @click="onBar(0)">
				<image v-if="barCurrent == 0" class="icon" src="../../static/images/1-002.png" mode=""></image>
				<image v-else class="icon" src="../../static/images/1-001.png" mode=""></image>
				<text>主页</text>
			</view>
			<view class="bar" :class="barCurrent == 1?'activeBar':''" @click="onBar(1)">
				<image v-if="barCurrent == 1" class="icon" src="../../static/images/sqare_select.png" mode=""></image>
				<image v-else class="icon" src="../../static/images/sqare_default.png" mode=""></image>
				<text>大厅</text>
			</view>
			<view class="bar" :class="barCurrent == 2?'activeBar':''" @click="onBar(2)">
				<image v-if="barCurrent == 2" class="icon" src="../../static/images/4-002.png" mode=""></image>
				<image v-else class="icon" src="../../static/images/4-001.png" mode=""></image>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	import index from './index/index'
	import square from './square/list'
	import user from './user/index'

	export default {
		components: {
			index,
			square,
			user
		},
		data() {
			return {
				barCurrent: 0
			}
		},
		onShow() {
			uni.hideHomeButton()
		},
		methods: {
			onBar(index) {
				console.log('index is ', index);
				this.barCurrent = index
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.page-box {
		flex: 1;
		flex-shrink: 1;
		overflow: auto;
	}

	.tabbar {
		padding-bottom: calc(2rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(2rpx + constant(safe-area-inset-bottom));
		height:calc(102rpx + env(safe-area-inset-bottom));
		height: calc(102rpx + constant(safe-area-inset-bottom));
		background-color: #fff;
		width: 100%;
		display: flex;
		z-index: 999;
		position: relative;
		box-shadow: -1px -1px 1px #ccc;
	}

	.tabbar .bar {
		display: flex;
		justify-content: space-around;
		flex: 1;
		font-size: 14px;
	}

	.tabbar .bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tabbar .bar text {
		font-size: 13px;
	}

	.activeBar text {
		color: red;
	}

	.tabbar .bar .icon {
		width: 40rpx;
		height: 40rpx;
		/* background-color: #C0C0C0; */
		margin-bottom: 6rpx;
	}
</style>
